<template>
  <div class="ZLJK">
    <el-card class="box-card" style="height: 150px">
      <div slot="header">
        <span style="font-weight: 700; font-size: 18px">质量统计监控</span>
      </div>
      统计周期
      <el-select
        v-model="time_val"
        placeholder="请选择"
        size="small"
        @change="time_type_change"
      >
        <el-option label="月度(近12月)" value="1"> </el-option>
        <el-option label="日度(近30天)" value="2"> </el-option>
        <el-option label="年度(近6年)" value="3"> </el-option>
      </el-select>
    </el-card>

    <el-card class="box-card" style="height: 800px">
      <el-radio-group v-model="radio" @change="radio_change">
        <el-radio :label="1">上传数据总量(条)</el-radio>
        <el-radio :label="2">上传成功数(条)</el-radio>
        <el-radio :label="3">完整性评分</el-radio>
        <el-radio :label="4">一致性评分</el-radio>
        <el-radio :label="5">规范性评分</el-radio>
        <el-radio :label="6">准确性评分</el-radio>
        <el-radio :label="7">唯一性</el-radio>
        <el-radio :label="8">关联性</el-radio>
      </el-radio-group>
      <div
        id="main2"
        :style="{
          width: '1700px',
          height: '200px',
          display: 'inline-block',
        }"
      ></div>
      <p style="margin-top: 20px; font-size: 18px; font-weight: 700">
        数据质量统计趋势表：
      </p>
      <el-table :data="List" style="width: 100%" stripe height="340">
        <el-table-column prop="date" label="时间" width="180">
        </el-table-column>
        <el-table-column prop="allQuantity" label="上传数据总量(条)">
        </el-table-column>
        <el-table-column prop="allQuantityCorrect" label="上传成功数(条)">
        </el-table-column>
        <el-table-column prop="integrity" label="完整性评分"> </el-table-column>
        <el-table-column prop="compliance" label="一致性评分">
        </el-table-column>
        <el-table-column prop="normative" label="规范性评分"> </el-table-column>
        <el-table-column prop="timeliness" label="准确性评分">
        </el-table-column>
        <el-table-column prop="continuity" label="唯一性"> </el-table-column>
        <el-table-column prop="ratio" label="关联性"> </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      time_val: "1",
      radio: 1,
      List: [],
    };
  },
  mounted() {
    this.time_type_change();
    this.drawLine2();
  },
  methods: {
    drawLine2(init) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("main2"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: "数据质量统计趋势图：",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: [],
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: init.time,
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "",
            type: "line",
            stack: "1",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: init.data,
            smooth: true,
          },
        ],
      });
    },
    time_type_change() {
      console.log(this.time_val);
      this.$get(
        baseUrl.jbIp +
          "/T1/api/v1/Platform/Data/QualityMonitor?type=" +
          this.time_val
      ).then((res) => {
        this.List = res.data;
        this.radio_change();
      });
    },
    radio_change() {
      var init = {
        time: [],
        data: [],
      };
      if (this.radio == 1) {
        for (var i in this.List) {
          init.data.push(this.List[i].allQuantity);
          init.time.push(this.List[i].date);
        }
        this.drawLine2(init);
        return;
      }
      if (this.radio == 2) {
        for (var i in this.List) {
          init.data.push(this.List[i].allQuantityCorrect);
          init.time.push(this.List[i].date);
        }
        this.drawLine2(init);
        return;
      }
      if (this.radio == 3) {
        for (var i in this.List) {
          init.data.push(this.List[i].integrity);
          init.time.push(this.List[i].date);
        }
        this.drawLine2(init);
        return;
      }
      if (this.radio == 4) {
        for (var i in this.List) {
          init.data.push(this.List[i].compliance);
          init.time.push(this.List[i].date);
        }
        this.drawLine2(init);
        return;
      }
      if (this.radio == 5) {
        for (var i in this.List) {
          init.data.push(this.List[i].normative);
          init.time.push(this.List[i].date);
        }
        this.drawLine2(init);
        return;
      }
      if (this.radio == 6) {
        for (var i in this.List) {
          init.data.push(this.List[i].timeliness);
          init.time.push(this.List[i].date);
        }
        this.drawLine2(init);
        return;
      }
      if (this.radio == 7) {
        for (var i in this.List) {
          init.data.push(this.List[i].continuity);
          init.time.push(this.List[i].date);
        }
        this.drawLine2(init);
        return;
      }
      if (this.radio == 8) {
        for (var i in this.List) {
          init.data.push(this.List[i].ratio);
          init.time.push(this.List[i].date);
        }
        this.drawLine2(init);
        return;
      }
    },
  },
};
</script>

<style></style>
